<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" >
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <!--[if gt IE 8]>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <![endif]-->

    <title>液位检测监控系统</title>


    <!-- CSS -->
    <link rel="stylesheet" href="/static/css/drop-down.css">
    <link rel="stylesheet" href="/static/css/reset.css">
    <link rel="stylesheet" href="/static/css/supersized.css">
    <link rel="stylesheet" href="/static/css/style.css">
    <link rel="stylesheet" href="/static/css/buttons.css">
    <link rel="stylesheet" type="text/css" href="/static/css/default.css">
    <link rel="stylesheet" type="text/css" href="/static/css/styles_bar.css">
    <!--<link type="text/css" rel="stylesheet" media="all" href="/static/css/global.css" />-->
    <!--<link type="text/css" rel="stylesheet" media="all" href="/static/css/global_color.css" />-->
    <link type="text/css" rel="stylesheet" media="all" href="/static/css/style_alert.css" />
    <link href="/static/css/stylesheet.css" rel="stylesheet" type="text/css" />
    <link href="/static/css/reveal.css" rel="stylesheet" type="text/css" />
    <link href="/static/css/style_abnormal.css" rel="stylesheet" type="text/css" />

    <!--[if lt IE 8]>
    <link href="css/ie7.css" rel="stylesheet" type="text/css" />
    <![endif]-->

    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
    <script src="/static/js/html5.js"></script>
    <![endif]-->
    <script src="/static/js/jquery-1.8.2.min.js" ></script>
    <script src="/static/js/supersized.3.2.7.min.js" ></script>
    <!--<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>-->
    <!--<script src="/static/js/supersized-init.js" ></script>-->
    <script src="/static/js/scripts.js" ></script>
    <script src="/static/js/modernizr.custom.79639.js" ></script>
    <!--<script type="text/javascript" src="/static/js/jquery-1.11.0.min.js"></script>-->
    <!--<script type="text/javascript" src="/static/js/jquery-ui.min.js"></script>-->

    <!--<script type="text/javascript" src="/static/js/select-widget-min.js"></script>-->

    <!-- Javascript -->

    <script>
        <!--动态添加床位-->
        <!--json取新接入设备数据-->
        var dataupdate;
        <!--var LeftCap = 100;-->
        var	orange = 30,
                yellow = 55,
                green = 85;
        var lowpower_devices={'Devices':{},'devices_num':0};
        function sortbycap(a,b)
        {
            return a.Device.DataList[1] - b.Device.DataList[1]
        }
        dataupdate = function(){

            $.getJSON('http://'+window.location.host+'/admin/api/get_devices_list/{{.UserID}}', function(data) {
                //console.log(data.sort(sortbycap))
                // vardevices = data.sort(sortbycap);
                $("#clearfix").empty();
                $("#devices_num").text((data.length));
                lowpower_devices={'Devices':{},'devices_num':0};
                $.each(data.sort(sortbycap),function(index,element){

                    if(element.Device.PowerEnenge < 10){
                        lowpower_devices.Devices[(element).Mac] = element;
                        lowpower_devices.devices_num++
                    }
                    if (typeof($("#"+element.Device.DeviceID).attr("id")) == "undefined"  && (element.Device.DeviceID != "")){
                        $("#clearfix").append('<li class="level" id="level'+element.Device.DeviceID+'"><div class="bedicon"><div class="progress progress--active" id="progress'+element.Device.DeviceID+'"><b class="progress__bar"  id="'+element.Device.DeviceID+'"><span class="progress__text" style="font-size:18px;font-color:#330000;"><p class="font_SurplusCapacity" ><em id="left_cap'+element.Device.DeviceID+'">100%</em></p></span></b></div></div><div class="bediconinformation"><p> '+element.Bed.Room_.Floor+'楼'+element.Bed.Room_.RoomNum+'房'+element.Bed.BedNum+'号</p><p>剩余时间：'+element.Device.DataList[0]+'分钟</p></div></div>')
                        var LeftCap = element.Device.DataList[1];

                        var device = $("#"+element.Device.DeviceID)
                        if(LeftCap >100) {
                            LeftCap = 100;
                        } else if (LeftCap >= 85) {
                            device.addClass('progress__bar--green');
                        } else if (LeftCap >= 55 && LeftCap <85) {
                            device.removeClass('progress__bar--green');
                            device.addClass('progress__bar--yellow');
                        } else if (LeftCap >= 30 && LeftCap <55) {
                            device.removeClass('progress__bar--green');
                            device.removeClass('progress__bar--yellow')
                            device.addClass('progress__bar--orange');
                        }
                        else if (LeftCap > 0 && LeftCap <30) {
                            device.removeClass('progress__bar--green');
                            device.removeClass('progress__bar--yellow')
                            device.removeClass('progress__bar--orange')
                            device.addClass('progress__bar--red');
                        }else if (LeftCap <= 0) {
                            LeftCap = 0;
                            device.addClass('progress__bar--red');
                            // alert("输液完成");
                            <!--$("#"+'level'+element.DeviceID).remove();-->
                            <!--$("#"+'progress'+element.DeviceID).addClass('wancheng');-->
                        }
                        $("#left_cap"+element.Device.DeviceID).text(LeftCap+'%');
                        device.css({ width:LeftCap + '%' });
                    }else{
                    }
                });

            });
            $('#lowpower_devices_num').text(lowpower_devices.devices_num)
            setTimeout(function() {
                dataupdate();
            },100000);
        };
        setTimeout(function() {
            dataupdate();
        },100);

    </script>

    <!--<script type="text/javascript">-->
    <!--$(document).ready(function(){-->
        <!--$(".ui-select").selectWidget({-->
            <!--change       : function (changes) {-->
            <!--return changes;-->
        <!--},-->
            <!--effect       : "slide",-->
            <!--keyControl   : true,-->
            <!--speed        : 200,-->
            <!--scrollHeight : 250-->
        <!--});-->
    <!--});-->
    <!--</script>-->

</head>
<body>

<div class="header">
    <div class="logo">液位检测监控系统</div>

</div>

<div class="menu">

    <div class="breadLine">
        <div class="adminControl active">
            你好,{{.admin.UserName}}
        </div>
    </div>

    <ul class="navigation">
        <li class="active">
            <a href="index.html">
                <span class="isw-graph"></span><span class="text">在线设备</span>
            </a>
        </li>
        <li>
            <a  class="a-alert test" href="#">
                <span class="isw-settings"></span><span class="text">显示设置</span>
            </a>
        </li>
        <li>
            <a href="statistic.html">
                <span class="isw-zoom"></span><span class="text">历史查询</span>
            </a>
        </li>
        <li>
            <a href="/admin/show_admin_index/{{.UserID}}">
                <span class="isw-cancel"></span><span class="text">退出监控</span>
            </a>
        </li>
    </ul>

    <div class="dr"><span></span></div>

    <div class="widget-fluid">
        <div id="menuDatepicker"></div>
    </div>

    <div class="dr"><span></span></div>

    <div class="widget-fluid">
        <div class="wBlock clearfix">
            <div class="dSpace">
                <h3>Last visits</h3>
                <span class="number">6,302</span>
                <span>5,774 <b>unique</b></span>
                <span>3,512 <b>returning</b></span>
            </div>
            <div class="rSpace">
                <h3>Today</h3>
                <span class="mChartBar" sparkType="bar" sparkBarColor="white"></span>
                <span>&nbsp;</span>
                <span>65% <b>New</b></span>
                <span>35% <b>Returning</b></span>
            </div>
        </div>
    </div>

    <div class="dr"><span></span></div>

    <div class="Abnormal-equipment" style="width:219px;height:100%;margin-top:350px;">
        <div id="rightArrow"><a href="javascript:;" title="异常设备"></a></div>
        <div id="floatDivBoxs">
            <div class="floatDtt">异常设备</div>
            <div class="floatShadow">
                <ul class="floatDqq">
                    <li style="padding-left:0px;">&nbsp;&nbsp;设备1</li>
                    <li style="padding-left:0px;">&nbsp;&nbsp;设备2</li>
                    <li style="padding-left:0px;">&nbsp;&nbsp;设备3</li>
                    <li style="padding-left:0px;">&nbsp;&nbsp;设备4</li>
                    <li style="padding-left:0px;">&nbsp;&nbsp;设备5</li>
                    <li style="padding-left:0px;">&nbsp;&nbsp;设备6</li>
                    <li style="padding-left:0px;">&nbsp;&nbsp;设备7</li>
                </ul>
            </div>
            <div class="floatDbg"></div>
        </div>
    </div>
</div>

<div class="content">

    <div class="breadLine">
        <ul class="breadcrumb">
            <li>监控页面<span class="divider">></span></li>
            <li class="active">在线设备</li>
        </ul>
    </div>

    <div class="workplace">

        <div class="row-fluid">

            <div class="span4">

                <div class="wBlock red clearfix">
                    <div class="dSpace">
                        <!--<h3>Invoices statistics</h3>-->
                        <h3>电量低于10%设备数量</h3>
                        <span class="mChartBar" sparkType="bar" sparkBarColor="white"></span>
                        <span class="number" id="lowpower_devices_num">0</span>
                    </div>
                    <div class="rSpace">
                        <span>$1,530 <b>amount paid</b></span>
                        <span>$2,102 <b>in queue</b></span>
                        <span>$11,100 <b>total taxes</b></span>
                    </div>
                </div>

            </div>
            <div class="span4">

                <div class="wBlock blue clearfix">
                    <div class="dSpace">
                        <h3>当前监控部门</h3>
                        <span class="mChartBar" sparkType="bar" sparkBarColor="white"></span>
                        <span class="number">{{.monitor.DepartmentName}}</span>
                    </div>
                    <div class="rSpace">
                        <!--<span>65% <b>New</b></span>-->
                        <!--<span>35% <b>Returning</b></span>-->
                        <!--<span>00:05:12 <b>Average time on site</b></span>-->
                        <!--<select name="FilterDepartmentID"  class="ui-select">-->
                            <!--<option value="0">所有</option>-->
                            <!--{{range .departments}}-->
                            <!--<option value="{{.Id}}">{{.Name}}</option>-->
                            <!--{{end}}-->
                        <!--</select>-->
                        <!--float:left;margin-left:40px;background-color:#FFFFFF;border:1px solid #2DB2FF;box-shadow:0 0 2px #2DB2FF;border-radius:5px;font-size:1.7em;height:40px;position:relative;width:150px;-->

                        <select name="FilterFloor" class="ui-select" style="width:80px;float:left;margin-top:20px;background-color:#FFFFFF;border:1px solid #2DB2FF;box-shadow:0 0 2px #2DB2FF;border-radius:5px;font-size:1.7em;height:40px;position:relative;">
                            <option  value="0">房间</option>
                            {{range .rooms}}
                            <option  value="{{.Id}}">{{.Floor}}</option>
                            {{end}}
                        </select>
                        <select name="FilterDepartmentID" class="ui-select" style="width:80px;float:left;margin-top:20px;background-color:#FFFFFF;border:1px solid #2DB2FF;box-shadow:0 0 2px #2DB2FF;border-radius:5px;font-size:1.7em;height:40px;position:relative;">
                        <option value="0">部门</option>
                            {{range .departments}}
                            <option value="{{.Id}}">{{.Name}}</option>
                            {{end}}
                        </select>
                    </div>
                </div>

            </div>


            <div class="span4">

                <div class="wBlock green clearfix">
                    <div class="dSpace">
                        <h3 >当前在线设备</h3>
                        <span class="mChartBar" sparkType="bar" sparkBarColor="white"></span>
                        <span class="number" id="devices_num">2,513</span>
                    </div>
                    <div class="rSpace">
                        <span>351 <b>active</b></span>
                        <span>2102 <b>passive</b></span>
                        <span>100 <b>removed</b></span>
                    </div>
                </div>

            </div>

        </div>


        <div class="dr"><span></span></div>

        <div class="row-fluid">
            <div class="span12">
                <div class="head clearfix">
                    <div class="isw-graph"></div>
                    <h1>在线设备</h1>
                </div>
                <div class="block" id="block">
                    <!--<div id="chart-1" style="height: 100%; margin-top: 10px;">-->
                        <ul class="clearfix" id="clearfix">
                            <li class="level">
                                <div class="progress">
                                      <b class="progress__bar">
                                        <span class="progress__text" style="margin-left:-180px;font-size:18px;font-color:#330000;">
                                            <p class="font_SurplusCapacity">剩余液位: <em>100%</em></p>
				                        </span>
                                      </b>
                                </div>
                                <div class="bediconinformation">
                                            <p>床位信息</p>
                                            <p> x楼x房x号</p>
                                            <p>剩余输液时间：</p>
                                </div>
                            </li>
                        </ul>
                    <!--</div>-->
                </div>
            </div>

        </div>


    </div>

</div>




<!-- Javascript -->
<script type="text/javascript" src="/static/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="/static/js/jquery.sobox.js"></script>
<!--DIV高度自适应-->
<script type="text/javascript">
        var h =document.getElementById("block").offsetHeight;
            if (h>800){
                document.getElementById("block").style.height="100"+"%";
            }else{
                document.getElementById("block").style.height="800"+"px";
            }
</script>
<!--异常设备显示-->
<script type="text/javascript">
var flag=1;
$('#rightArrow').click(function(){
	if(flag==1){
		$("#floatDivBoxs").animate({left: '-175px'},300);
		$(this).animate({left: '-5px'},300);
		$(this).css('background-position','-50px 0');
		flag=0;
	}else{
		$("#floatDivBoxs").animate({left: '0'},300);
		$(this).animate({left: '170px'},300);
		$(this).css('background-position','0px 0');
		flag=1;
	}
});
</script>

<script>
        function click_sure(){
            console.log("sure");
        }
        function click_cancel(){
            console.log("close");

        }
        <!--显示设置弹窗-->
        $('.a-alert').click(function (e) {
            //$.sobox.alert('设置','<div class="setup"><p style="font-size: 23px;color:#000000;font-family:黑体;text-align:center;">在线病床显示设置</p><form action="/admin/api/chaneg_filter/{{.UserID}}" method="post"><div class="setupmain"><div class="option" style="margin-left: 200px;"><dl class="select"><select class="showselect"><option value="Floor">楼层</option><option value="Floor1">1楼</option><option value="Floor2">2楼</option></select></div><div class="option"><dl class="select"><select class="showselect"><option value="Department">部门</option><option value="儿科">儿科</option><option value="妇科">妇科</option></select></div></div><div class="liquidbutton"><div style="float: left; width: 300px;height: 80px;margin-top: 50px; margin-left: 10px;"><p style="font-size: 25px;color:#000000;font-family:黑体;">液位提醒开关</p></div><div class="switch demo3"><input type="checkbox" name="LiquidCheck" class="LiquidCheck" checked><label><i></i></label></div></div><div class="colorbutton"><div style="float: left; width: 300px;height: 80px;margin-top: 80px; margin-left: 20px;"><p style="font-size: 25px;color:#000000;font-family:黑体;">颜色提醒开关</p></div><div class="switch demo3"><input type="checkbox"  name="ColorCheck" class="ColorCheck" checked><label><i></i></label></div></div></form></div>');
            $.sobox.pop({
                /* 弹出类型及类型参数 */
                type : 'iframe', // 弹窗内容模式:'content','target','ajax','iframe'，每个模式分别对应每个参量
                target : null, // target方式，target目标，如 '.detail','#contbox'
                content :'',
                iframe : "/admin/api/chaneg_filter/{{.admin.UserID}}", // iframe方式，值为iframe目标页链接，如：http:// www.baidu.com/
                ajax:{url:null,data:null,callback:function(){}}, // ajax方式

                /* 位置信息 */
                posType:'center', // 'center,win,doc,tc,bc' 位置类型：居中 | 距window顶部 | 距离doucment顶部定 | top水平居中 | bottom水平居中
                pos:[0,0], // [x,y] 距离document左上角坐标,set模式使用
                offset:[0,0], // [x,y] 弹窗相对本来设定位置偏移量,center模式只改变y轴

                /* 自定义参数 */
                cls : null, // 添加自定义类名
                width:700,height:500, // 宽高属性,iframe模式下，height为iframe高度
                defaultShow:true, // 直接显示pop
                visibility:true, // 默认pop执行后显示（用于部分复杂处理场景）
                title : '显示设置', // 默认标题
                showTitle:true, // 标题栏隐藏：默认显示
                outCloseBtn : false, //标题上的关闭按钮是否外置 ：默认内置
                showMask : true, // 显示遮罩
                onlyOne : false, // 为true时，同一状态下只显示一个pop
                drag :true, // 是否可拖动
                maskClick : true, // 点击背景关闭内容
                btn : [{
                    cls:null, // 添加类名
                    text:'确定', // 默认按钮文字
                    link:'#', // 为a添加链接，添加链接后，按钮返回链接指向地址
                    removePop: true, // 默认点击按钮关闭弹出层
                    callback:function (){
                        click_sure();
                    } // 返回事件
                }
                ], // {cls:,text'确定',link:,removePop: true,callback:}

                /* 返回事件 */
                beforePop:function(){}, // 窗口打开之前返回事件
                onPop: function(){}, // 窗口打开返回事件
                closePop: function(){
                    console.log($('.ColorCheck'))

                } // 窗口关闭返回事件
            });
            return false;
        });
    </script>
</body>
</html>
